<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
  
       
</head>
<body>
     {{include './common/header.html'}}

    <!-- 页面标题 -->
    <section class="bg-blue-400 text-white py-10 mt-16">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold">产品中心</h1>
            <p class="mt-4 text-xl">提供优质的工业产品和专业解决方案</p>
        </div>
    </section>

    <!-- 产品分类和展示区 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <!-- 分类筛选器 -->
            <div class="mb-12">
                <div class="flex flex-wrap gap-4 justify-center">
                    <button class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors" data-category="all">
                        <a href="product/index.html?category=all">产品中心</a>
                    </button>
                     {{if subnav?.level1?.children.length>0}}
                        {{each  subnav?.level1.children}}
                            <button class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors" data-category="{{$value.pinyin}}">
                            <a href="{{$value.path}}/index.html?category={{$value.pinyin}}"> {{$value.name}}</a>
                            </button>
                        {{/each}}
                    {{/if}}
                </div>
            </div>

            <!-- 产品展示区 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <!-- 原料类 -->
                 {{if articleList.list.length>0}}
                  {{each articleList.list}}
                <div class="product-item show" data-category="raw">
                    <a href="{{$value.path}}/article-{{$value.id}}.html" class="card block">
                        {{if $value.img}}
                        <div class="w-full h-64">
                            <img  src="{{$value.img}}"  alt="{{$value.title}}" class="w-full h-64 object-cover">
                        </div>
                        {{/if}}
                        <div class="p-6 h-32">
                            <h3 class="text-xl font-semibold mb-2">{{$value.title}}</h3>
                            <p class="text-gray-600 line-clamp-2 h-10 overflow-hidden text-ellipsis text-sm">{{@ $value.description}}</p>
                        </div> 
                    </a>
                </div>
{{/each}}
                {{/if}}

            </div>

            <!-- 分页 -->
              {{if pageHtml}}
            <div class="mt-12 flex justify-center">
                <nav class="inline-flex rounded-md page">
                    <ul>
                    {{@ pageHtml}}
                    </ul>
                    <!-- <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                        1
                    </a>
                    <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        2
                    </a>
                    <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        3
                    </a>
                    <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        下一页
                    </a> -->
                </nav>
            </div>
            {{/if}}
        </div>
    </section>

    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
     <script>
       

        // 分类按钮初始化
        document.addEventListener('DOMContentLoaded', function () {
            const categoryButtons = document.querySelectorAll('.category-button');
            const urlParams = new URLSearchParams(window.location.search);
            const currentCategory = urlParams.get('category') || 'all';

            // 设置初始选中状态
            categoryButtons.forEach(button => {
                if (button.dataset.category === currentCategory) {
                    button.classList.add('active');
                }
            });

            // 添加点击事件处理
            // categoryButtons.forEach(button => {
            //     button.addEventListener('click', function(e) {
            //         e.preventDefault();
            //         // 移除所有按钮的active类
            //         categoryButtons.forEach(btn => btn.classList.remove('active'));
            //         // 为当前按钮添加active类
            //         this.classList.add('active');

            //         // 更新URL参数，保留已有参数
            //         const newUrl = new URL(window.location);
            //         newUrl.searchParams.set('category', this.dataset.category);
            //         window.history.pushState({}, '', newUrl);
                    
            //         // 触发页面重新加载以应用筛选
            //         window.location.href = newUrl.toString();
            //     });
            // });
   });

   </script>
</body>
</html>